<template>
	<view class="wrap">
		<u-cell-group :border="false">
			<u-cell title="头像" :isLink="true" arrow-direction="right" @click="choiceImg">
				<view slot="value">
					<!-- {{baseUrl}} -->
					<!-- <image v-if="form.headPic" style="width: 80rpx; height: 80rpx;border-radius: 40rpx;"  :src="`${baseUrl}${form.headPic}`"></image> -->
					<u-avatar v-if="form.headPic" :src="`${baseUrl}${form.headPic}`"></u-avatar>
					<!-- <u-icon name="arrow-right"></u-icon> -->
				</view>
				<!-- <u-input v-model="form.phone" border="none" slot="right-icon"  /> -->
			</u-cell>
			<u-cell title="昵称">
				<u-input v-model="form.nickName" border="none" slot="right-icon" inputAlign="right" />
			</u-cell>
			<u-cell title="手机" :border="false">
				<u-input v-model="form.phone" slot="right-icon" border="none" inputAlign="right" />
			</u-cell>
			<!-- <u-cell icon="setting-fill" title="只是近黄昏"></u-cell> -->
		</u-cell-group>
		<!-- <div class="item">
			<div class="name">头像</div>
			<div class="info">
				<u--image :src="avatar" width="80rpx" height="80rpx" shape="circle"></u--image>
			</div>
		</div>
		<div class="item">
			<div class="name">昵称</div>
			<div class="info">{{ form.nickName }}</div>
		</div>
		<div class="item">
			<div class="name">手机号</div>
			<div class="info">{{ form.ID }}</div>
		</div> -->
		<view class="bottom">
			<u-button type="primary" shape="circle" @click="updateUser" text="保存" color="#21B579"></u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			avatar: '',
			form: {
				phone: '33',
				nickName: '111',
				headPic: ''
			},
			baseUrl:getApp().globalData.baseImgUrl,
			list: []
		};
	},
	// onShow(){
	// 	console.log(getApp().globalData.baseImgUrl)
	// },
	onLoad() {
		this.getUserInfo();
	},
	methods: {
		// 更新用户信息
		updateUser() {
			console.log(this.form)
			this.$api.post('/fit/updateUser', this.form).then((res) => {
				console.log(res);
				this.list = res.data.list;
			});
		},
		choiceImg() {
			let that = this
			
			uni.chooseImage({
				success: (chooseImageRes) => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					uni.uploadFile({
						// url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
						url: 'https://fit.jmlson.com/fit/upload', 
						filePath: tempFilePaths[0],
						file:tempFilePaths[0],
						name: 'file',
						success: (uploadFileRes) => {
							console.log(uploadFileRes);
							console.log(uploadFileRes.data.result);
							const data = JSON.parse(uploadFileRes.data)
							console.log(data)
							that.form.headPic = data.result
						}
					});
				}
			});
		},
		// / 获取用户信息数据
		getUserInfo() {
			this.$api.post('/fit/getUserInfoById',{userId:getApp().globalData.userInfo.id}).then(res=>{
				console.log(res)
				this.form = {
					phone: res.data.phone,
					nickName:  res.data.nickname,
					headPic:  res.data.head_pic.replace(getApp().globalData.baseImgUrl,'')
				}
			})
			// let that = this;
			// uni.getStorage({
			// 	key: 'userInfo',
			// 	success(res) {
			// 		console.log(res);
			// 		that.form.phone = res.data.phone || '';
			// 		that.form.nickName = res.data.nickName || '';
			// 		that.form.headPic = res.data.head_pic || '';
			// 	}
			// });
		}
	}
};
</script>

<style scoped lang="scss">
.wrap {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 32rpx;
	margin: 32rpx;
	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx #f8f9fa solid;
		padding: 30rpx;
		&:nth-child(3) {
			border-bottom: none;
		}
		.name {
			color: #333;
			font-size: 30rpx;
		}
	}
	.bottom {
		position: fixed;
		bottom: 32rpx;
		left: 32rpx;
		right: 32rpx;
	}
}
</style>
